<template>
  <div>
    <a-card :bordered="false" style="position: relative; margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <div class="search-wrapper-btn">
          <a-button type="link" @click="show = !show">
            <span v-if="!show">展开<a-icon type="down" /></span>
            <span v-else>收起<a-icon type="up" /></span>
          </a-button>
        </div>
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item mode_item_none">
            <a-form-model-item label="关键词" class="zdy-form-item-label">
              <a-textarea
                v-model="formData.keyword"
                placeholder="可输入搜索情报名称、情报ID、关键词"
                style="width: 80%"
                :auto-size="{ minRows: 3, maxRows: 6 }"
              />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="数据来源" class="zdy-form-item-label">
              <a-checkbox
                :indeterminate="indeterminateState"
                :checked="checkAllState"
                @change="onCheckAllChange($event, 1)"
              >
                全部
              </a-checkbox>
              <j-multi-select-tag
                v-model="formData.sourceTypeList"
                dictCode="dataSource"
                type="checkbox"
                @change="onChange($event, 1)"
              />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="商品分类" class="zdy-form-item-label">
              <a-checkbox
                :indeterminate="indeterminateGrade"
                :checked="checkAllGrade"
                @change="onCheckAllChange($event, 2)"
              >
                全部
              </a-checkbox>
              <j-multi-select-tag
                v-model="formData.goodsTypeList"
                dictCode="goodsType"
                type="checkbox"
                @change="onChange($event, 2)"
              />
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="发布地点">
              <a-select placeholder="请选择" v-model="formData.publishedArea" allowClear>
                <a-select-option v-for="(item, index) in areaData" :key="index" :value="item.name">{{
                  item.name
                }}</a-select-option>
              </a-select>
              <!-- <j-dict-select-tag v-model="form.publishedArea" placeholder="请选择" dictCode="goodsPrice" /> -->
            </a-form-model-item>
            <a-form-model-item label="商品价格">
              <j-dict-select-tag v-model="formData.goodsPriceType" placeholder="请选择" dictCode="goodsPrice" />
            </a-form-model-item>
            <a-form-model-item label="评论/价数量：" class="plBox">
              <j-dict-select-tag v-model="formData.chatType" placeholder="请选择" dictCode="commentCount" />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="推送时间" class="zdy-form-item-label">
              <a-radio-group buttonStyle="solid" v-model="formData.pushType">
                <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
              <a-range-picker
                v-if="formData.pushType === '0'"
                :allowClear="true"
                v-model="rangePickerTime"
                valueFormat="YYYY-MM-DD"
                @change="rangePickerChange"
                style="margin-left: 10px"
              />
            </a-form-model-item>
          </div>
          <div style="margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              <span>
                <a-button type="primary" style="margin: 0 10px" @click="saveConfig"> 保存配置 </a-button>
                <!-- <a-tooltip placement="leftTop">
                  <template slot="title">
                    <span>针对预警时间、劝阻状态、预警等级、处置方式的当前选择保存配置</span>
                  </template>
                  <a-icon type="question-circle" />
                </a-tooltip> -->
              </span>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <downLoadComponents
        ref="downLoadComponents"
        :formData="exportData"
        :apiUrl="downUrl"
        :fileText="fileText + '.xls'"
      >
        <a-button class="exportBtn" @click="onExport"> 导出数据 </a-button>
      </downLoadComponents>
      <InfoList
        ref="infoListID"
        :pageData="pageData"
        :Keywords="[this.formData.keyword]"
        @onRefreshTable="refreshTable"
      />
      <!--弹窗区域 -->
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getQueryConfig, saveQueryConfig } from '@/api/alarm.js'
import * as informationApi from '@/api/information.js'
import { getXzqhList, getDictItemsFromCache } from '@/api/api'
import CustomTable from '@/components/zxd/Table/CustomTable'
import InfoList from './components/infoList'
import downLoadComponents from '@/components/zxd/downLoad'
export default {
  components: {
    CustomTable,
    InfoList,
    downLoadComponents,
  },
  data() {
    return {
      moment,
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      rangePickerTime: [],
      show: false,
      loading: false,
      visible: false,
      indeterminateGrade: false,
      indeterminateState: false,
      isDisabled: true,
      reloading: false,
      dictOptions1: getDictItemsFromCache('dataSource'), //数据来源-字典值
      dictOptions2: getDictItemsFromCache('goodsType'), //商品类型-字典值
      selectKeys: [],
      formData: {},
      options: [
        { value: '2', text: '今天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      areaData: [],
      exportData: {},
      pageData: {},
      fileText: '情报推送-导出',
      downUrl: 'smuggle/smuInfoRecord/exportXls',
      // dlParams: {},
    }
  },
  computed: {
    checkAllState() {
      let bool = false
      let sourceTypeList =
        Object.keys(this.formData).length > 0 && this.formData.sourceTypeList
          ? this.formData.sourceTypeList.split(',')
          : []
      if (this.dictOptions1.length === sourceTypeList.length) {
        bool = true
      }
      return bool
    },
    checkAllGrade() {
      let bool = false
      let goodsTypeList =
        Object.keys(this.formData).length > 0 && this.formData.goodsTypeList
          ? this.formData.goodsTypeList.split(',')
          : []
      if (this.dictOptions2.length === goodsTypeList.length) {
        bool = true
      }
      return bool
    },
  },
  created() {},
  async mounted() {
    await this.getConfig()
    this.getArea()
    // this.initForm()
    this.onQuery()
  },
  methods: {
    initForm() {
      this.$set(this.formData, 'pushType', this.options[0].value)
      this.$set(
        this.formData,
        'sourceTypeList',
        this.dictOptions1
          .map((v) => {
            return v.value
          })
          .join(',')
      )
      this.$set(
        this.formData,
        'goodsTypeList',
        this.dictOptions2
          .map((v) => {
            return v.value
          })
          .join(',')
      )
    },
    getArea() {
      informationApi
        .smuAreaList({ category: '1' })
        .then((res) => {
          if (res.success) {
            this.areaData = res.result.smuAreaList
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    refreshTable(params) {
      if (params != undefined) {
        this.pageFilter.pageNo = params.currentPage
        this.pageFilter.pageSize = params.pageSize
      }
      // console.log(this.formData.sourceTypeList)
      if (this.formData.sourceTypeList != null && this.formData.sourceTypeList.length > 0) {
        this.pageFilter.sourceTypeList = this.formData.sourceTypeList.split(',')
      } else {
        this.pageFilter.sourceTypeList = []
      }
      if (this.formData.goodsTypeList != null && this.formData.goodsTypeList.length > 0) {
        this.pageFilter.goodsTypeList = this.formData.goodsTypeList.split(',')
      } else {
        this.pageFilter.goodsTypeList = []
      }
      let formData = Object.assign({}, this.formData, this.pageFilter)
      this.loading = true
      informationApi
        .recordList(formData)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            this.$refs.infoListID.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.formData = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.$nextTick(() => {
        // 重置行政区划
        // this.$refs.linkage.reload()
        this.reload()
      })
      this.initForm()
      this.refreshTable()
    },
    onTableChange(pageFilter, filters, sorter) {
      this.pageFilter = { ...this.pageFilter, ...pageFilter }
      this.refreshTable()
    },
    // 保存配置
    saveConfig() {
      let obj = {
        keyword: this.formData.keyword,
        sourceTypeList: this.formData.sourceTypeList,
        goodsTypeList: this.formData.goodsTypeList,
        publishedArea: this.formData.publishedArea,
        goodsPriceType: this.formData.goodsPriceType,
        chatType: this.formData.chatType,
        pushType: this.formData.pushType,
        pushStart: this.formData.pushStart,
        pushEnd: this.formData.pushEnd,
      }
      var parameter = {
        config: JSON.stringify(obj),
        modulePrefix: 'informationList',
      }
      saveQueryConfig(parameter)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    // 获取保存配置
    async getConfig() {
      try {
        var parameter = {
          modulePrefix: 'informationList',
        }
        let res = await getQueryConfig(parameter)
        if (res.success) {
          let data = res.result && res.result != 'null' ? res.result : {}
          let parseData = Object.keys(data).length > 0 ? JSON.parse(data) : {}
          if (data && Object.keys(parseData).length > 0) {
            this.$set(this.formData, 'keyword', parseData.keyword)
            this.$set(this.formData, 'sourceTypeList', parseData.sourceTypeList)
            this.$set(this.formData, 'goodsTypeList', parseData.goodsTypeList)
            this.$set(this.formData, 'publishedArea', parseData.publishedArea)
            this.$set(this.formData, 'goodsPriceType', parseData.goodsPriceType)
            this.$set(this.formData, 'chatType', parseData.chatType)
            this.$set(this.formData, 'pushType', parseData.pushType)
            this.$set(this.formData, 'pushStart', parseData.pushStart)
            this.$set(this.formData, 'pushEnd', parseData.pushEnd)
            this.rangePickerTime = [parseData.pushStart, parseData.pushEnd]
          } else {
            this.initForm()
          }
        } else {
          this.initForm()
        }
      } catch (err) {
        this.$message.warn('请求失败！')
      }
    },
    // 详情
    onDetail(record) {
      this.$router.push({
        path: '/smuggleInformation/detail',
        query: {
          id: record.id,
          type: record.type,
        },
      })
    },
    // 详情
    // onHandle(record) {
    //   this.$refs.detailsModalRef.handle(record)
    //   this.$refs.detailsModalRef.title = '疑似受害人详情'
    //   this.$refs.detailsModalRef.disableSubmit = true
    // },
    // 预警时间
    rangePickerChange(date) {
      this.$set(this.formData, 'pushStart', date[0])
      this.$set(this.formData, 'pushEnd', date[1])
    },
    //全选 type为1，劝阻状态；type为2,预警等级；type为3,处置方式
    onCheckAllChange(e, type) {
      if (type === 1) {
        Object.assign(this, { indeterminateState: false })
        this.$set(
          this.formData,
          'sourceTypeList',
          e.target.checked
            ? this.dictOptions1
                .map((v) => {
                  return v.value
                })
                .join(',')
            : null
        )
      } else if (type === 2) {
        Object.assign(this, { indeterminateGrade: false })
        this.$set(
          this.formData,
          'goodsTypeList',
          e.target.checked
            ? this.dictOptions2
                .map((v) => {
                  return v.value
                })
                .join(',')
            : null
        )
      }
      // console.log(this.formData.goodsTypeList)
    },
    //单选 type为1，劝阻状态；type为2,预警等级；type为3,处置方式
    onChange(checkedList, type) {
      // console.log(this.formData.goodsTypeList)
      let dataLists = checkedList.split(',')
      if (type === 1) {
        this.indeterminateState = !!dataLists.length && dataLists.length < this.dictOptions1.length
      } else if (type === 2) {
        this.indeterminateGrade = !!dataLists.length && dataLists.length < this.dictOptions2.length
      }
    },
    onExport() {
      if (this.formData.sourceTypeList != null && this.formData.sourceTypeList.length > 0) {
        this.pageFilter.sourceTypeList = this.formData.sourceTypeList.split(',')
      } else {
        this.pageFilter.sourceTypeList = []
      }
      if (this.formData.goodsTypeList != null && this.formData.goodsTypeList.length > 0) {
        this.pageFilter.goodsTypeList = this.formData.goodsTypeList.split(',')
      } else {
        this.pageFilter.goodsTypeList = []
      }
      this.exportData = Object.assign({}, this.formData, this.pageFilter)

      setTimeout(() => {
        this.exportData.idList = this.$refs.infoListID.selectKeys
        this.$refs.downLoadComponents.exportDowmPOST()
        this.$refs.infoListID.onClearRowKeys()
      }, 500)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 25%;
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }
    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }
      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
    }
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.plBox /deep/.ant-col-5 {
  width: 25%;
}
.qbTitle {
  color: #000;
  // display: block;
  font-size: 16px;
  font-weight: 550;
  margin-bottom: 10px;
  .ant-tag {
    margin-left: 30px;
  }
}
.exportBtn {
  position: absolute;
  top: 36px;
  left: 95px;
  z-index: 1;
}
/deep/.ant-table-thead > tr > th {
  background-color: #fff;
}
/deep/.ant-table-tbody .ant-table-row td {
  padding-bottom: 0;
}
.sp {
  margin-left: 20px;
}
</style>
